<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <script>
        (function(window, undefined) {
            var jQuery = function(selector) {
                return new jQuery.fn.init(selector);
            }
            jQuery.fn = jQuery.prototype = {
                    constructor: jQuery,
                    init: function(selector) {
                        var elements = document.querySelectorAll(selector);
                        [].push.apply(this, elements);
                    },
                    css: function(name, value) {
                        // console.log('css is ok');
                        if (arguments.length === 2) {
                            // console.log(name, value);
                            for (var i = 0; i < this.length; i++) {
                                // console.log(this[i]);
                                // 坑：style.name=value 设置name的值
                                // name是变量，需要用[]
                                this[i].style[name] = value;
                            }
                        } else if (arguments.length === 1) {
                            if (typeof name === 'object') {
                                for (var i = 0; i < this.length; i++) {
                                    // 遍历对象
                                    for (k in name) {
                                        // k为键
                                        // name[k] 对应的值
                                        this[i].style[k] = name[k];
                                    }
                                }
                            } else if (typeof name === 'string') {
                                // 获取第一个元素的样式
                                // console.log(this[0]);
                                // return this[0].style[name];

                                return window.getComputedStyle(this[0], null)[name];
                            }
                        }
                        return this;
                    }
                }
                // 把init的原型对象替换成jquery的原型对象
            jQuery.fn.init.prototype = jQuery.fn;
            // 暴露
            window.jQuery = window.$ = jQuery;
        })(window)

        var $divs = $('div');
        console.log($divs);

        $divs.css('color', 'lime'); //设置单个样式
        // $divs.css({
        //         'color': 'lime',
        //         'fontSize': '20px',
        //     }) //设置多个样式
        $divs.css('color'); //获取样式
        console.log($divs.css('color'));
    </script>
</body>

</html>